<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话界面</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="chat-container">
        <div class="chat-content" id="chatContent">
            <div class="typing-indicator">
                <span class="typing-text">AI正在回答中...</span>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>
        <!-- 文件上传显示区域 -->
        <div class="file-display-area" id="fileDisplayArea" style="display: none;">
            <div class="file-info">
                <i class="fas fa-file-alt file-icon"></i>
                <span id="fileNameDisplay" class="file-name"></span>
            </div>
            <button class="clear-file-button" id="clearFileButton">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="input-area">
            <select class="model-select" id="modelSelect">
                <option value="ernie">文心一言</option>
                <option value="deepseek">深度求索</option>
                <option value="qwen">通义千问</option>
            </select>

            <div class="input-group">
                <input type="text" class="message-input" id="messageInput" placeholder="请输入问题...">
                <!-- 隐藏的文件输入 -->
                <input type="file" id="fileInput" multiple accept=".xlsx,.xls" style="display: none;">
                <!-- 上传按钮 -->
                <button class="upload-button" id="uploadButton">
                    <i class="fas fa-paperclip"></i>
                </button>
                <button class="send-button" id="sendButton">发送</button>
            </div>
        </div>
        <!-- 文件列表显示区域 -->
        <div class="file-list-area" id="fileListArea" style="display: none;">
            <div class="file-list-header">
                <span>已上传文件</span>
                <button class="clear-all-files-button" id="clearAllFilesButton">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="file-list-content" id="fileListContent"></div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>